<template>
  <div id="Content-page">
    <Paging :pagData="[{ name: '用户管理', router: '/user-manag' }]" />
    <div class="content-main">
      <el-table :data="tableData" class="user-table">
        <el-table-column prop="nickname" label="昵称" width="180" />
        <el-table-column prop="time" label="头像">
          <template #default="scope">
            <el-image
              class="avatar"
              :src="scope.row.avatarUrl"
              lazy
              preview-teleported
              :zoom-rate="1.2"
              :preview-src-list="[scope.row.avatarUrl]"
              :initial-index="scope.$index"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="articleQuantity" label="作品数" />
        <el-table-column prop="concernQuantity" label="粉丝数" />
        <el-table-column prop="email" label="QQ邮箱" />
        <el-table-column prop="uid" label="uid" />
      </el-table>
      <!-- 分页 -->
      <div class="pager-next">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAllUserInforAPI } from '@/api/user-manag'
import type { AllUserInforItemResponse } from '@/type/user-manag'
// 顶部导航组件
import Paging from '@/page/components/Paging-component.vue'
import { ref, onMounted } from 'vue'
// 用户的游记
const tableData = ref<AllUserInforItemResponse[]>([])
const count = ref(1)
onMounted(async () => {
  await getAllUserInfor()
})
async function getAllUserInfor(page = 1) {
  const res = await getAllUserInforAPI(page)
  count.value = res.data.count
  tableData.value = res.data.data
}
// 分页
async function currentChange(event: number) {
  await getAllUserInfor(event)
}
</script>

<style scoped>
/* 主题色与渐变（天空、绿叶、沙滩） */
#Content-page {
  --travel-sky: #e6f4ff;
  --travel-leaf: #e8f5e9;
  --travel-sand: #fff7e6;
  --primary: #26a69a; /* 海岛青 */
  --primary-strong: #1f8f86;
  --text-strong: #0f3554;

  min-height: 100%;
  padding: 16px 20px;
  background: linear-gradient(
    180deg,
    var(--travel-sky) 0%,
    var(--travel-leaf) 45%,
    var(--travel-sand) 100%
  );
}

.content-main {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 16px 18px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  overflow-x: auto;
}

/* 表格卡片化与圆角 */
.user-table {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

/* 去除默认边框背景，使其柔和 */
:deep(.el-table) {
  background-color: transparent;
}
:deep(.el-table__inner-wrapper::before),
:deep(.el-table__border-left-patch) {
  background-color: transparent;
}

/* 表头配色：清新渐变 */
:deep(.el-table__header-wrapper .el-table__header th) {
  background: linear-gradient(90deg, #e0f7fa 0%, #e3f2fd 100%);
  color: var(--text-strong);
  font-weight: 600;
}

/* 行与单元格 hover 反馈 */
:deep(.el-table__row td) {
  transition: background-color 0.2s ease;
}
:deep(.el-table__body tr:hover > td) {
  background-color: rgba(38, 166, 154, 0.08) !important;
}

/* 头像样式（圆形、轻描边与阴影） */
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(38, 166, 154, 0.15);
}

/* 分页样式美化 */
.pager-next {
  display: flex;
  justify-content: center;
  padding: 12px 0 6px;
}
:deep(.el-pagination.is-background .el-pager li) {
  border-radius: 10px;
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: var(--primary);
  color: #fff;
}
:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  color: var(--primary-strong);
}
:deep(.el-pagination button:hover),
:deep(.el-pagination.is-background .el-pager li:hover) {
  filter: brightness(0.95);
}

/* 小屏优化 */
@media (max-width: 768px) {
  .content-main {
    padding: 12px;
  }
  :deep(.el-table__header-wrapper .el-table__header th) {
    white-space: nowrap;
  }
}
</style>
